<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/css/font.css}">
    <link rel="stylesheet" th:href="@{/css/xadmin.css}">
    <script th:src="@{/lib/layui/layui.js}" charset="utf-8"></script>
    <script type="text/javascript" th:src="@{/js/xadmin.js}"></script>
</head>

<body style="background-color: #FFFAE3">
<div class="x-nav" style="height: 43px">
          <span class="layui-breadcrumb">
            <a href="">首页</a>
          </span>
    <i class="layui-icon layui-icon-refresh" style="line-height:35px"></i></a>
</div>
<div id="div1">
    <table style="margin-left: 10px" class="layui-hide" id="text" lay-filter="demo"></table>
</div>
<div id="div2" style="background-color: #FFFAE3">
    <table class="layui-table" style="text-align: center">
        <colgroup>
            <col width="150">
            <col width="150">
            <col width="200">
            <col>
        </colgroup>
        <thead>
        <tr style="background-color: #FFFAE3">
            <th colspan="4" style="text-align: center;font-size: 20px;font-weight: bold;">未通过审批采购计划一览表</th>
        </tr>
        </thead>
        <tbody style="background-color: #FFFAE3">
        <tr style="background-color: #FFFAE3">
            <td style="background-color: #FFFAE3;font-weight: bold;width: 230px">采购计划编号</td>
            <td style="width: 400px" id="stockNum"></td>
            <td style="background-color: #FFFAE3;font-weight: bold;width: 230px">采购计划名称</td>
            <td style="width: 400px" id="stockName1" ></td>
        </tr>
        <tr style="background-color: #FFFAE3">
            <td style="background-color: #FFFAE3;font-weight: bold;width: 230px">公司名称</td>
            <td style="width: 400px">长沙北大青鸟有限公司</td>
            <td style="background-color:#FFFAE3;font-weight: bold;width: 230px">编制人</td>
            <td style="width: 400px">[[${session.employee.empName}]]</td>
        </tr>
        <tr style="background-color: #FFFAE3">
            <td style="background-color: #FFFAE3;font-weight: bold;width: 230px">预算金额(元)</td>
            <td style="width: 400px" id="budget"></td>
            <td style="background-color: #FFFAE3;font-weight: bold;width: 230px">采购计划编制时间</td>
            <td style="width: 400px" id="date"></td>
        </tr>
        </tbody>
    </table>
    <table style="margin-left: 10px" class="layui-hide" id="table" lay-filter="demo"></table>
    <table class="layui-table" style="text-align: center">
        <colgroup>
            <col width="150">
            <col width="150">
            <col width="200">
            <col>
        </colgroup>
        <tbody style="background-color: #FFFAE3">
        <tr style="background-color: #FFFAE3">
            <td style="background-color: #FFFAE3;font-weight: bold;width: 230px">采购方式</td>
            <td style="width: 800px" class="demoTable" id="stockType">
            </td>
        </tr>
        <tr id="trr" style="background-color: #FFFAE3">
            <td style="background-color: #FFFAE3;font-weight: bold;width: 230px">拟选供应商</td>
            <td style="width: 800px">
                本产品类所有供应商
            </td>
        </tr>
        <tr style="background-color: #FFFAE3">
            <td style="background-color: #FFFAE3;font-weight: bold;width: 230px">说明：（400字以内）</td>
            <td style="width: 800px" id="remark">
            </td>
        </tr>
        <tr style="background-color: #FFFAE3">
            <td style="background-color: #FFFAE3;font-weight: bold;width: 230px">部长是否同意</td>
            <td style="width: 800px" id="leadAgree">
            </td>
        </tr>
        <tr style="background-color: #FFFAE3">
            <td style="background-color: #FFFAE3;font-weight: bold;width: 230px">部长审核意见</td>
            <td style="width: 800px" id="leadOpinion">
            </td>
        </tr>
        </tbody>
    </table>
    <div class="layui-input-block">
        <button type="button" onclick="Fan()" class="layui-btn" lay-submit="" lay-filter="demo1">返回</button>
    </div>
</div>
<div id="div3" style="background-color: #FFFAE3">
    <table class="layui-table" style="text-align: center;background-color: #FFFAE3">
        <colgroup>
            <col width="150">
            <col width="150">
            <col width="200">
            <col>
        </colgroup>
        <thead>
        <tr>
            <th colspan="4" style="text-align: center;font-size: 20px;font-weight: bold;">编制采购计划</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td style="background-color: #FFFAE3;font-weight: bold;width: 230px">采购计划编号</td>
            <td style="width: 400px" id="stockNum1"></td>
            <td style="background-color: #FFFAE3;font-weight: bold;width: 230px">采购计划名称</td>
            <td style="width: 400px"><input type="text" id="stockName2" name="title" lay-verify="title"
                                            autocomplete="off" class="layui-input"></td>
        </tr>
        <tr>
            <td style="background-color: #FFFAE3;font-weight: bold;width: 230px">公司名称</td>
            <td style="width: 400px">长沙北大青鸟有限公司</td>
            <td style="background-color: #FFFAE3;font-weight: bold;width: 230px">编制人</td>
            <td style="width: 400px">[[${session.employee.empName}]]</td>
        </tr>
        <tr>
            <td style="background-color: #FFFAE3;font-weight: bold;width: 230px">预算金额(元)</td>
            <td style="width: 400px"><input type="text" id="budget1" name="title" lay-verify="title" autocomplete="off"
                                            class="layui-input"></td>
            <td style="background-color: #FFFAE3;font-weight: bold;width: 230px">采购计划编制时间</td>
            <td style="width: 400px" ><input type="date" id="date1" name="title" lay-verify="title" autocomplete="off"
                                             class="layui-input"></td>
        </tr>
        </tbody>
    </table>
    <table style="margin-left: 10px" id="table1" lay-filter="demo"></table>
    <table class="layui-table" style="text-align: center;background-color: #FFFAE3">
        <colgroup>
            <col width="150">
            <col width="150">
            <col width="200">
            <col>
        </colgroup>
        <tbody style="background-color: #FFFAE3">
        <tr style="background-color: #FFFAE3">
            <td style="background-color: #FFFAE3;font-weight: bold;width: 230px">采购方式</td>
            <td style="width: 800px" class="demoTable">
                <div class="layui-inline">
                    <select name="stockType" onchange="changeSel(this)" id="stockType3" lay-filter="ReportType" lay-verify="required">
                        <option value="公开求购">公开求购</option>
                        <option value="定向询价">定向询价</option>
                    </select>
                </div>
            </td>
        </tr>
        <tr id="trr1">
            <td style="background-color: #FFFAE3;font-weight: bold;width: 230px">满足条件的供应商列表</td>
            <td style="width: 800px">
                <table style="margin-left: 10px" id="tableMZ" lay-filter="demo"></table>
            </td>
        </tr>
        <tr>
            <td style="background-color: #FFFAE3;font-weight: bold;width: 230px">财务部是否同意</td>
            <td style="width: 800px">
                不同意
            </td>
        </tr>
        <tr>
            <td style="background-color: #FFFAE3;font-weight: bold;width: 230px">财务部审核意见</td>
            <td style="width: 800px">
                不同意
            </td>
        </tr>
        <tr>
            <td style="background-color: #FFFAE3;font-weight: bold;width: 230px">说明：（400字以内）</td>
            <td style="width: 800px">
                <input type="text" id="remark1" name="title" lay-verify="title" autocomplete="off" class="layui-input">
            </td>
        </tr>
        </tbody>
    </table>
    <div class="layui-input-block">
        <button type="reset" onclick="buttonQueDing()" class="layui-btn layui-btn-primary">确定</button>
        <button type="button" onclick="Cls()" class="layui-btn" lay-submit="" lay-filter="demo1">取消</button>
    </div>
</div>
</body>
<script id="toolbarDemo" type="text/html">
    <div className="layui-btn-container" style="font-size: 20px;font-weight: bold;width: 500px;margin-left: 560px;"
         id="divLeft">
        未通过审批采购计划一览表
    </div>
    <div class="demoTable" style="margin: auto;margin-top: 15px">
        计划状态:
        <div class="layui-inline">
            <select name="ssStatic" id="ssStatic" lay-filter="ReportType" lay-verify="required">
                <option value="">全部</option>
                <option value="驳回">驳回</option>
                <option value="废弃">废弃</option>
            </select>
        </div>
        采购类型：
        <button class="layui-btn" data-type="reload" onclick="buttonSS()" id="search">查询</button>
    </div>
</script>
<script id="button" type="text/html">
    <a class="layui-btn layui-btn-xs" lay-event="edit">详情</a>
    <!--    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">修改</a>-->
    <a class="layui-btn layui-btn-xs" lay-event="Del">删除</a>
</script>
<script>
    var iids=[];
    layui.use('table', function () {
        $("#div2").hide();
        $("#div3").hide();
        var table = layui.table;
        table.render({
            elem: '#text'  //html中渲染table的id
            , url: '/stock/SelX2'   //后台获取数据集合的地址
            , cellMinWidth: 80
            , toolbar: '#toolbarDemo'
            , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                //,curr: 5 //设定初始在第 5 页
                , groups: 1 //只显示 1 个连续页码
                , first: false//不显示首页
                , last: false //不显示尾页

            }, cols: [
                [
                    //表单显示的title以及返回的需要显示的数据，field值与获取集合中的类的字段名一致。
                    , {width: 171, field: 'id', title: '序号', align: 'center'}
                    , {width: 171, field: 'stockName', title: '采购计划名称', align: 'center'}
                    , {width: 171, field: 'stockType', title: '采购类型', align: 'center'}
                    , {width: 171, field: 'ssStatic', title: '状态', align: 'center'}
                    , {
                    width: 171, field: 'submitDate', title: '采购计划下达时间', align: 'center',
                    templet: function (d, value) {
                        if (d.submitDate == null) {
                            return '未下达';
                        } else {
                            return d.submitDate;
                        }
                    }
                }
                    , {width: 171, field: 'leader', title: '审批人', align: 'center'}
                    , {width: 171, fixed: 'right', width: 280, title: '操作', toolbar: "#button", align: 'center'}
                ]
            ],
        });
        buttonSS()
        table.on('tool(demo)', function (obj) {
            var data = obj.data;
            if (obj.event === 'detail') {
                $.ajax({
                    url: "/stock/Update",
                    data: {"id": data.id},
                    type: "GET",
                    success: function (result) {
                        $("#div1").hide();
                        $("#div2").hide();
                        $("#div3").show();
                        $("#trr1").hide();
                        var orders = result.orders;
                        for (let order of orders) {
                            iids.push(order.materialCode)
                        }
                        $("#stockNum1").html(result.stockNum);
                        $("#stockName2").val(result.stockName);
                        $("#budget1").val(result.budget);
                        $("#date").html(result.startDate);
                        $("#remark1").val(result.remark);
                        layui.use('table', function () {
                            var table = layui.table;
                            table.render({
                                elem: '#table1'  //html中渲染table的id
                                , data: orders   //后台获取数据集合的地址
                                , cols: [
                                    [
                                        //表单显示的title以及返回的需要显示的数据，field值与获取集合中的类的字段名一致。
                                        , {field: 'id', title: '序号', align: 'center'}
                                        , {width: 200, field: 'materialCode', title: '物资编码', align: 'center'}
                                        , {width: 340, field: 'materialName', title: '物资名称', align: 'center'}
                                        , {width: 110, field: 'amount', title: '数量', align: 'center'}
                                        , {width: 110, field: 'measureUnit', title: '计量单位', align: 'center'}
                                        , {width: 110, field: 'startDate', title: '交货期', align: 'center'}
                                        , {width: 110, field: 'unitPrice', title: '协议价格（元）', align: 'center'}
                                        , {width: 110, field: 'sumPrice', title: '预算总金额（元）', align: 'center'}
                                        , {width: 110, field: 'startDate', title: '计划价（元/不含税）', align: 'center'}
                                    ]
                                ]
                            });
                        });
                    }
                });
            } else if (obj.event == 'edit') {
                alert(data.stockNum);
                $("#div2").show();
                $("#div1").hide();
                layui.use('table', function () {
                    $.ajax({
                        url: "/stock/XiangQing",
                        data: {"stockNum": data.stockNum},
                        type: "GET",
                        success: function (result) {
                            $("#stockNum").html(result.stockNum);
                            $("#budget").html(result.budget);
                            $("#stockType").html(result.stockType);
                            $("#remark").html(result.remark);
                            $("#stockName1").html(result.stockName);
                            var myDate = new Date;
                            var year = myDate.getFullYear(); //获取当前年
                            var mon = myDate.getMonth() + 1; //获取当前月
                            var date = myDate.getDate(); //获取当前日
                            $("#date").html(year + "年" + mon + "月" + date + "日");
                            if (result.leadAgree == null) {
                                $("#leadAgree").html("未审批");
                                $("#leadOpinion").html("未审批");
                            } else {
                                $("#leadAgree").html(result.leadAgree);
                                $("#leadOpinion").html(result.leadOpinion);
                            }
                            var table = layui.table;
                            table.render({
                                elem: '#table'  //html中渲染table的id
                                , data: result.orders   //后台获取数据集合的地址
                                , cols: [
                                    [
                                        //表单显示的title以及返回的需要显示的数据，field值与获取集合中的类的字段名一致。
                                        , {field: 'id', title: '序号', align: 'center'}
                                        , {width: 200, field: 'materialCode', title: '物资编码', align: 'center'}
                                        , {width: 340, field: 'materialName', title: '物资名称', align: 'center'}
                                        , {width: 110, field: 'amount', title: '数量', align: 'center'}
                                        , {width: 110, field: 'measureUnit', title: '计量单位', align: 'center'}
                                        , {width: 110, field: 'startDate', title: '交货期', align: 'center'}
                                        , {width: 110, field: 'unitPrice', title: '协议价格（元）', align: 'center'}
                                        , {width: 110, field: 'sumPrice', title: '预算总金额（元）', align: 'center'}
                                        , {width: 110, field: 'startDate', title: '计划价（元/不含税）', align: 'center'}
                                    ]
                                ]
                            });
                        }
                    });
                });
            } else if (obj.event == 'del') {
                layer.confirm('删除后,采购计划将消失!确定执行该操作吗?', function (index) {
                    $.ajax({
                        url: "/stock/Del",
                        data: {"id": data.id},
                        type: "GET",
                        success: function (result) {
                            layer.alert("删除成功!")
                            layer.close(index);
                        }
                    });
                })
            }
            ;
        })
    })
    function buttonSS() {
        var table = layui.table;
        table.reload('text', {
            method: 'post',
            where: {
                ssStatic: $.trim($('#ssStatic').val()),
            },
            page: {
                curr: 1
            }
        });
    };
    function Fan(){
        $("#div1").show();
        $("#div2").hide();
    }
    function changeSel(t){
        if($.trim($(t).val())=="定向询价"){
            $.ajax({
                url: "/supplier/SelByMat",
                data: {
                    "ids": iids,
                },
                type: "GET",
                success: function (result1) {
                    layui.use('table', function () {
                        var table = layui.table;
                        table.render({
                            elem: '#tableMZ'  //html中渲染table的id
                            ,data:result1
                            , cellMinWidth: 80
                            , cols: [
                                [
                                    //表单显示的title以及返回的需要显示的数据，field值与获取集合中的类的字段名一致。
                                    {field: 'company',  title: '供应商名称', align: 'center'}
                                ]
                            ]
                        });
                    })
                }
            })
            $("#trr1").show();
        }else{
            $("#trr1").hide();
        }
    }
    function Cls(){
        $("#div1").show();
        $("#div3").hide();
    }
    function buttonQueDing(){
        var stockName = $("#stockName2").val();
        var budget = $("#budget1").val();
        var stockType = $("#stockType3").val();
        var remark = $("#remark1").val();
        var stockNum = $("#stockNum1").html();
        var startDate=$("#date1").val();
        if (stockName == null || stockName == '' || budget == null || budget == '' || stockType == null || stockType == '') {
            layer.alert("未填写！");
        } else {
            $.ajax({
                url: "/stock/QueDing",
                data: {
                    "stockName": $.trim(stockName),
                    "budget": $.trim(budget),
                    "stockType": $.trim(stockType),
                    "remark": $.trim(remark),
                    "stockNum": $.trim(stockNum),
                    "ssStatic":'未报批',
                    "startDate":$.trim(startDate)
                },
                type: "GET",
                success: function (result) {
                    if ($.trim(result) == "true") {
                        layer.alert("编制成功！");
                        location.href = "/planman/Project_list.html";
                    }
                }
            });
        }
    }
</script>
</html>